JavaScripti koodikvaliteedi väravad: Pre-commit Hook'ide seadistamise meisterklass

Pidevalt arenevas tarkvaraarenduse maailmas on kõrge koodikvaliteedi säilitamine esmatähtis. Puhas, hästi vormindatud ja vigadeta kood mitte ainult ei vähenda hoolduskulusid, vaid soodustab ka koostööd ja kiirendab arendustsükleid. Üks võimas tehnika koodikvaliteedi tagamiseks on koodikvaliteedi väravate rakendamine pre-commit hook'ide abil. See artikkel pakub põhjalikku juhendit pre-commit hook'ide seadistamiseks JavaScripti projektide jaoks, võimaldades teil automatiseerida koodikvaliteedi kontrolle juba enne, kui kood teie repositooriumisse jõuab.

Mis on Pre-commit Hook'id?

Git hook'id on skriptid, mida Git käivitab enne või pärast selliseid sündmusi nagu commit, push ja receive. Pre-commit hook'id käivitatakse spetsiifiliselt enne commiti lõplikku vormistamist. Need pakuvad olulist võimalust kontrollida commit'itavaid muudatusi ja vältida commite, mis ei vasta eelnevalt määratletud kvaliteedistandarditele. Mõelge neist kui väravavahtidest, mis takistavad madala kvaliteediga koodi sattumist teie koodibaasi.

Miks kasutada Pre-commit Hook'e JavaScripti koodikvaliteedi tagamiseks?

• Varajane vigade avastamine: Pre-commit hook'id püüavad koodikvaliteedi probleemid kinni arendusprotsessi varases staadiumis, vältides nende edasist levikut. See on palju tõhusam kui probleemide avastamine koodi ülevaatuse käigus või, mis veelgi hullem, tootmiskeskkonnas.
• Automatiseeritud koodi vormindamine: Tagage ühtlane koodistiil kogu meeskonnas ja projektis. Automatiseeritud vormindamine hoiab ära stiilivaidlused ja aitab kaasa loetavama koodibaasi loomisele.
• Vähendatud koodi ülevaatuse koormus: Rakendades automaatselt kodeerimisstandardeid, vähendavad pre-commit hook'id koodi ülevaatajate koormust, võimaldades neil keskenduda arhitektuurilistele otsustele ja keerulisele loogikale.
• Parem koodi hooldatavus: Ühtlast ja kvaliteetset koodibaasi on aja jooksul lihtsam hooldada ja arendada.
• Jõustatud järjepidevus: Need tagavad, et kogu kood vastab projekti standarditele, olenemata sellest, milline arendaja selle kirjutas. See on eriti oluline hajutatud meeskondades, kes töötavad erinevates asukohtades – näiteks Londonis, Tokyos ja Buenos Aireses –, kus individuaalsed kodeerimisstiilid võivad erineda.

Peamised tööriistad JavaScripti koodikvaliteedi jaoks

Mitmeid tööriistu kasutatakse tavaliselt koos pre-commit hook'idega JavaScripti koodikvaliteedi kontrollide automatiseerimiseks:

• ESLint: Võimas JavaScripti linter, mis tuvastab potentsiaalseid vigu, jõustab kodeerimisstiile ja aitab parandada koodi loetavust. See toetab laia valikut reegleid ja on väga konfigureeritav.
• Prettier: Arvamuspõhine koodivormindaja, mis vormindab koodi automaatselt ühtse stiili järgimiseks. See toetab JavaScripti, TypeScripti, JSX-i ja paljusid teisi keeli.
• Husky: Tööriist, mis teeb Git hook'ide haldamise lihtsaks. See võimaldab teil määratleda skripte, mis käivitatakse Giti töövoo erinevates etappides.
• lint-staged: Tööriist, mis käivitab lintereid ja vormindajaid ainult staged-failidel, kiirendades oluliselt pre-commit protsessi. See hoiab ära tarbetud kontrollid muutmata failidel.

Pre-commit Hook'ide seadistamine: Samm-sammuline juhend

Siin on üksikasjalik juhend, kuidas seadistada oma JavaScripti projekti jaoks pre-commit hook'e, kasutades Huskyt ja lint-staged'i:

Samm 1: Paigaldage sõltuvused

Kõigepealt paigaldage vajalikud paketid arendussõltuvustena, kasutades npm-i või yarn-i:

            npm install --save-dev husky lint-staged eslint prettier
            

              
                Copy
              
            
          

Või kasutades yarn-i:

            yarn add --dev husky lint-staged eslint prettier
            

              
                Copy
              
            
          

Samm 2: Käivitage Husky

Husky lihtsustab Git hook'ide haldamise protsessi. Käivitage see järgmise käsuga:

            npx husky install
            

              
                Copy
              
            
          

See loob teie projekti kausta `.husky`, kuhu salvestatakse teie Git hook'id.

Samm 3: Seadistage Pre-commit Hook

Lisage pre-commit hook Husky abil:

            npx husky add .husky/pre-commit "npx lint-staged"
            

              
                Copy
              
            
          

See käsk loob `.husky` kausta faili nimega `pre-commit` ja lisab sinna käsu `npx lint-staged`. See ütleb Gitile, et käivitada lint-staged enne iga commiti.

Samm 4: Seadistage lint-staged

lint-staged võimaldab teil käivitada lintereid ja vormindajaid ainult staged-failidel, mis kiirendab oluliselt pre-commit protsessi. Looge oma projekti juurkausta fail `lint-staged.config.js` (või `lint-staged.config.mjs` ES-moodulite jaoks) ja seadistage see järgmiselt:

            module.exports = {
  '*.{js,jsx,ts,tsx}': ['eslint --fix', 'prettier --write'],
};
            

              
                Copy
              
            
          

See konfiguratsioon käsib lint-stagedil käivitada ESLint ja Prettier kõikidel staged JavaScripti ja TypeScripti failidel. ESLinti lipp `--fix` parandab automaatselt kõik lintimise vead, mida saab automaatselt parandada, ja Prettieri lipp `--write` vormindab failid ning kirjutab need vormindatud koodiga üle.

Alternatiivina saate konfiguratsiooni määratleda otse oma `package.json` failis:

            {
  "lint-staged": {
    "*.{js,jsx,ts,tsx}": [
      "eslint --fix",
      "prettier --write"
    ]
  }
}
            

              
                Copy
              
            
          

Samm 5: Seadistage ESLint

Kui te pole seda veel teinud, seadistage oma projekti jaoks ESLint. Saate luua ESLinti konfiguratsioonifaili järgmise käsuga:

            npx eslint --init
            

              
                Copy
              
            
          

See juhendab teid läbi ESLinti konfiguratsioonifaili (`.eslintrc.js`, `.eslintrc.json` või `.eslintrc.yml`) loomise protsessi vastavalt teie projekti nõuetele. Saate valida erinevate eelmääratletud konfiguratsioonide hulgast või luua oma kohandatud reegleid.

Näide `.eslintrc.js`:

            module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true
  },
  extends: [
    'eslint:recommended',
    'plugin:react/recommended',
    'plugin:@typescript-eslint/recommended',
    'prettier'
  ],
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaFeatures: {
      jsx: true
    },
    ecmaVersion: 12,
    sourceType: 'module'
  },
  plugins: [
    'react',
    '@typescript-eslint'
  ],
  rules: {
    'no-unused-vars': 'warn',
    'react/prop-types': 'off'
  }
};
            

              
                Copy
              
            
          

See konfiguratsioon laiendab soovitatud ESLinti reegleid, soovitatud Reacti reegleid, soovitatud TypeScripti reegleid ja integreerub Prettieriga. Samuti keelab see `react/prop-types` reegli ja seab `no-unused-vars` reegli hoiatuseks.

Samm 6: Seadistage Prettier

Seadistage Prettier, luues oma projekti juurkausta faili `.prettierrc.js` (või `.prettierrc.json`, `.prettierrc.yml` või `.prettierrc.toml`). Saate kohandada Prettieri vormindamisvalikuid vastavalt oma projekti stiilijuhistele.

Näide `.prettierrc.js`:

            module.exports = {
  semi: false,
  trailingComma: 'all',
  singleQuote: true,
  printWidth: 120,
  tabWidth: 2
};
            

              
                Copy
              
            
          

See konfiguratsioon seab Prettieri kasutama ühekordseid jutumärke, ilma semikooloniteta, lõpukomasid, rea pikkuseks 120 märki ja tabulatsiooni laiuseks 2 tühikut.

Alternatiivina saate Prettieri konfiguratsiooni määratleda `package.json` failis:

            {
  "prettier": {
    "semi": false,
    "trailingComma": "all",
    "singleQuote": true,
    "printWidth": 120,
    "tabWidth": 2
  }
}
            

              
                Copy
              
            
          

Samm 7: Testige oma seadistust

Oma seadistuse testimiseks lisage mõned muudatused stage'i ja proovige neid commit'ida. Näiteks:

            git add .
            

              
                Copy
              
            
          

            git commit -m "Testi pre-commit hook'i"
            

              
                Copy
              
            
          

Kui esineb lintimis- või vormindamisprobleeme, parandavad ESLint ja Prettier need automaatselt (kui võimalik) või teatavad vigadest. Kui vigadest teatatakse, siis commit tühistatakse, mis võimaldab teil probleemid enne uuesti commit'imist parandada.

Täpsemad seadistusvalikud

Erinevate linterite ja vormindajate kasutamine

Saate hõlpsasti integreerida teisi lintereid ja vormindajaid oma pre-commit hook'i konfiguratsiooni. Näiteks saate kasutada Stylelinti CSS- või SASS-failide lintimiseks:

            npm install --save-dev stylelint stylelint-config-standard
            

              
                Copy
              
            
          

Seejärel värskendage oma `lint-staged.config.js` faili, et lisada Stylelint:

            module.exports = {
  '*.{js,jsx,ts,tsx}': ['eslint --fix', 'prettier --write'],
  '*.{css,scss}': ['stylelint --fix'],
};
            

              
                Copy
              
            
          

Testide käivitamine enne commiti

Saate käivitada ka oma ühiktestid osana pre-commit hook'ist. See aitab tagada, et teie kood töötab õigesti, enne kui see commit'itakse. Eeldades, et kasutate Jesti:

            npm install --save-dev jest
            

              
                Copy
              
            
          

Uuendage oma `lint-staged.config.js` faili, et lisada testi käsk:

            module.exports = {
  '*.{js,jsx,ts,tsx}': ['eslint --fix', 'prettier --write', 'jest --findRelatedTests'],
  '*.{css,scss}': ['stylelint --fix'],
};
            

              
                Copy
              
            
          

Lipp `--findRelatedTests` käsib Jestil käivitada ainult teste, mis on seotud muudetud failidega, mis kiirendab protsessi oluliselt.

Pre-commit Hook'idest möödumine

Mõnel juhul võite soovida pre-commit hook'idest ajutiselt mööda minna. Saate seda teha, kasutades `git commit` käsuga lippu `--no-verify`:

            git commit --no-verify -m "Commit'i sõnum"
            

              
                Copy
              
            
          

Siiski on üldiselt soovitatav vältida hook'idest möödumist, välja arvatud juhul, kui see on hädavajalik, kuna neil on koodikvaliteedi säilitamisel oluline roll.

Levinud probleemide lahendamine

• Hook'id ei käivitu: Veenduge, et Husky on korralikult installitud ja käivitatud ning et `.husky` kaust on olemas teie projekti juurkaustas. Kontrollige ka, et `.husky` kaustas olev `pre-commit` fail on käivitatav.
• Lintimisvigu ei parandata: Veenduge, et ESLintiga kasutatakse lippu `--fix` ja et teie ESLinti konfiguratsioon on seadistatud teatud tüüpi vigade automaatseks parandamiseks.
• Prettier ei vorminda faile: Veenduge, et Prettieriga kasutatakse lippu `--write` ja et teie Prettieri konfiguratsioon on õigesti seadistatud.
• Aeglased pre-commit hook'id: Kasutage lint-staged'i, et käivitada lintereid ja vormindajaid ainult staged-failidel. Kaaluge ka oma ESLinti ja Prettieri konfiguratsioonide optimeerimist, et minimeerida kontrollitavate reeglite ja seadete arvu.
• Konfliktsed konfiguratsioonid: Veenduge, et teie ESLinti ja Prettieri konfiguratsioonid ei oleks omavahel vastuolus. Kui on, peate konfliktide lahendamiseks võib-olla kohandama ühte või mõlemat konfiguratsiooni. Kaaluge konfliktide vältimiseks jagatud konfiguratsiooni, nagu `eslint-config-prettier` ja `eslint-plugin-prettier`, kasutamist.

Pre-commit Hook'ide parimad praktikad

• Hoidke hook'id kiired: Aeglased hook'id võivad oluliselt mõjutada arendaja tootlikkust. Kasutage lint-staged'i ainult staged-failide töötlemiseks ja optimeerige oma linteri ja vormindaja konfiguratsioone.
• Pakkuge selgeid veateateid: Kui hook ebaõnnestub, pakkuge selgeid ja informatiivseid veateateid, et juhendada arendajaid probleemide lahendamisel.
• Automatiseerige nii palju kui võimalik: Automatiseerige koodi vormindamine ja lintimine, et minimeerida käsitsi tehtavat tööd ja tagada järjepidevus.
• Harige oma meeskonda: Veenduge, et kõik meeskonnaliikmed mõistaksid pre-commit hook'ide eesmärki ja kuidas neid tõhusalt kasutada.
• Kasutage ühtset konfiguratsiooni: Hoidke oma projektis ESLinti, Prettieri ja teiste tööriistade jaoks ühtset konfiguratsiooni. See aitab tagada, et kogu kood vormindatakse ja linditakse samal viisil. Kaaluge jagatud konfiguratsioonipaketi kasutamist, mida saab hõlpsasti installida ja värskendada mitmes projektis.
• Testige oma hook'e: Testige regulaarselt oma pre-commit hook'e, et tagada nende korrektne toimimine ja et need ei põhjustaks ootamatuid probleeme.

Globaalsed kaalutlused

Globaalselt hajutatud meeskondades töötades arvestage järgmisega:

• Ühtsed tööriistaversioonid: Veenduge, et kõik meeskonnaliikmed kasutavad samu ESLinti, Prettieri, Husky ja lint-staged'i versioone. Seda saab saavutada, määrates versioonid oma `package.json` failis ja kasutades sõltuvuste installimiseks paketihaldurit nagu npm või yarn.
• Platvormideülene ühilduvus: Testige oma pre-commit hook'e erinevates operatsioonisüsteemides (Windows, macOS, Linux), et tagada nende korrektne toimimine kõigil platvormidel. Kasutage võimaluse korral platvormideüleseid tööriistu ja käske.
• Ajavööndite erinevused: Olge pre-commit hook'i probleemidest meeskonnaliikmetega suheldes teadlik ajavööndite erinevustest. Pakkuge selgeid juhiseid ja näiteid, et aidata neil probleeme kiiresti lahendada.
• Keeletugi: Kui teie projekt hõlmab mitme keelega töötamist, veenduge, et teie pre-commit hook'id toetaksid kõiki projektis kasutatavaid keeli. Võimalik, et peate iga keele jaoks installima täiendavaid lintereid ja vormindajaid.

Kokkuvõte

Pre-commit hook'ide rakendamine on tõhus viis koodikvaliteedi tagamiseks, meeskonnakoostöö parandamiseks ja hoolduskulude vähendamiseks JavaScripti projektides. Integreerides tööriistu nagu ESLint, Prettier, Husky ja lint-staged, saate automatiseerida koodi vormindamist, lintimist ja testimist, tagades, et teie repositooriumisse commit'itakse ainult kvaliteetne kood. Järgides selles juhendis toodud samme, saate seadistada tugeva koodikvaliteedi värava, mis aitab teil luua puhtamaid, paremini hooldatavaid ja usaldusväärsemaid JavaScripti rakendusi. Võtke see praktika omaks ja tõstke oma meeskonna arendustöövoog juba täna uuele tasemele.